<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html ng-app="AlarmApp">
<head>
<base href="<%=basePath%>">

<title>My JSP 'alarmList.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

<style type="text/css">
.controls.inline>* {
	display: inline-block;
}

.controls.inline>input {
	width: 100px;
}
</style>
</head>
<body>
	<div class="row" style="margin-left:0;">
		<div class="row" style="margin-left:0;">
			<div class="span8">
				<div ng-controller="alarmFireCtrl" style="margin-top:10px;">
					<div class="control-group">
						<form id="searchParam">
							<div class="controls inline">
								<input class="input-xlarge focused" name="key_word" type="text"
									placeholder="请输入关键字"> <label for="focusedInput">单位名称:</label>
								<input class="input-xlarge focused" type="text" value=""
									name="company_name"> <label for="focusedInput">时间:</label>
								<input class="input-xlarge focused datetimepicker" type="datetime" value=""
									name="start_alarm_time" class="datetimepicker"> - <input
									class="input-xlarge focused datetimepicker" type="datetime" value=""
									name="end_alarm_time" class="">
								<button class="btn btn-warning" ng-click="searchBtn()">查询</button>
							</div>
						</form>
						<div class="controls">
							<a href="index.do?jspName=addAlarm"
								class="btn btn-primary">添加</a> 
							<a href="index.do?jspName=addAlarm&id={{alarmId}}"
								class="btn btn-success">编辑</a> 
							<a href="delAlarm.json?id={{alarmId}}"
								class="btn btn-info">删除</a>
						</div>
					</div>
					<div class="row-fluid">
						<div class="span12">
							<div class="block" style="    min-height: 700px;">
								<div class="navbar navbar-inner block-header">
									<div class="muted pull-left">警情总览</div>
								</div>
								<div class="block-content collapse in">
									<div class="span12">
										<div id="example_wrapper"
											class="dataTables_wrapper form-inline" role="grid">
											<div class="row">
												<div class="span6">
													<div id="example_length" class="dataTables_length">
														<label><select size="1" name="example_length"
															style="width: 76px;margin-left: 20px;"
															aria-controls="example"><option value="10"
																	selected="selected">10</option>
																<option value="25">25</option>
																<option value="50">50</option>
																<option value="100">100</option></select> records per page</label>
													</div>
												</div>
											</div>
											<table cellpadding="0" cellspacing="0" border="0"
												class="table table-striped table-bordered" id="example">
												<thead>
													<tr>
														<th>#</th>
														<th>单位名称</th>
														<th>报警时间</th>
														<th>接警时间</th>
														<th>类型</th>
														<th>警情描述</th>
														<th>处理结果</th>
													</tr>
												</thead>
												<tbody>
													<tr id="tr_{{alarm.id}}" data-id="alarm.id" ng-repeat="alarm in dataList" ng-click="trClick($event);">
														<td ng-bind="$index+1" data-id="{{alarm.id}}"></td>
														<td ng-bind="alarm.company_name" data-id="{{alarm.id}}"></td>
														<td ng-bind="alarm.alarm_time" data-id="{{alarm.id}}"></td>
														<td ng-bind="alarm.alarm_time" data-id="{{alarm.id}}"></td>
														<td ng-bind="alarm.typeName" data-id="{{alarm.id}}"></td>
														<td ng-bind="alarm.p_desc" data-id="{{alarm.id}}"></td>
														<td ng-bind="alarm.resultName" data-id="{{alarm.id}}"></td>
													</tr>
	
												</tbody>
											</table>
										</div>
										<div class="row" style="margin-left: 4px;">
											<div class="span6">
												<div class="dataTables_info" id="example_info">
													<span ng-bind="data.start+1"></span> to <span
														ng-bind="data.count"></span> of<span ng-bind="data.total"></span>
													entries
												</div>
											</div>
											<div class="span6">
												<div class="dataTables_paginate paging_bootstrap pagination"
													style="margin-top:0;">
													<ul>
														<li class="prev disabled"><a href="#">← Previous</a></li>
														<li class="active"><a href="#">1</a></li>
														<li><a href="#">2</a></li>
														<li><a href="#">3</a></li>
														<li><a href="#">4</a></li>
														<li><a href="#">5</a></li>
														<li class="next"><a href="#">Next → </a></li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- /block -->
						</div>
					</div>
				</div>
			</div>
			<style>
				#dataShow li {
					float:left;
				}
			</style>
			<div class="span4">
				<div class="row">
					<div id="dataShow" style="height:50px;" ng-controller="alarmDataCtrl">
						<ul style="list-style: none;">
							<li style="margin-right:10px;" ng-repeat="data in alarmMap" class="{{data.btnClass}}">
								<span ng-bind="data.name"></span>
								<span ng-bind="data.count"></span>
							</li>
						</ul>
					</div>
					<div id="lineChart" style="height:300px;"></div>
					<div id="pineChart" style="height:300px;"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
